<style lang="less">
  .second-house {
    width: 100%;
    padding-top: 1.5em;
    background: url("~@/assets/second-house-icon/home_two_bg.jpg") center top no-repeat;
    background-size: cover;
    h3.title {
      margin: 0;
      padding: 10px 0 10px 0;
      font-size: 48px;
      color: #0061ae;
      text-align: center;
    }

    .more {
      width: 1190px;
      margin: 0 auto;
      font-size: 14px;
      text-align: right;
    }

    @descWidth: -158px;
    p.desc {
      margin: 0px auto;
      text-align: center;
      line-height: 100%;
      span {
        position: relative;
        display: inline-block;
        &:after, &:before {
          content: '';
          border-top: solid 1px #666;
          width: -(@descWidth + 20px);
          top: 0.5em;
          position: absolute;
        }
        &:after {
          left: @descWidth;
        }
        &:before {
          right: @descWidth;
        }

      }
    }

    .item-wrapper {
      width: 1190px;
      margin: 2em auto 0 auto;
      padding-bottom: 1em;
      .list-wrapper {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      .item {
        height: 275px;
        width: 25%;
        margin-bottom: 2em;
        .link {
          display: block;
          position: relative;
          margin: 0 1em;
          img {
            width: 100%;
            height: 220px;
            display: block;
            background: #fbf8a8;
          }
          .head {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            padding: .5em 1em;
            background: rgba(0, 0, 0, .5);
            display: flex;
            justify-content: space-between;
            align-items: center;
            h2 {
              font-size: 20px;
              color: #fff;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            em {
              color: #eed60c;
              white-space: nowrap;
              font-size: 18px;
              font-style: normal;
            }
          }

        }
        .application {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          line-height: normal;
          margin: 1em 1em 0 1em;
          .address {
            font-size: 14px;
            color: #000;
            margin-right: 1em;
          }
          .go {
            border-radius: 5px;
            width: 120px;
            background: #0061ae;
            line-height: 35px;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
          }
        }
      }
    }
    img{
            width: 15px;
            margin-right: 5px;
    }

   /*  .new-carousel {
     width: 1190px;
     margin: 1.5em auto 0 auto;
     padding-bottom: 5em;
     .ivu-carousel-arrow{
       top: 30%;
     }
     .item-wrapper {
       display: flex;
       justify-content: space-between;
     }
     .item {
       height: 295px;
       width: 285px;
       .link {
         display: block;
         position: relative;
         img {
           width: 100%;
           height: 220px;
           display: block;
           background: #fbf8a8;
         }
         .head {
           position: absolute;
           left: 0;
           bottom: 0;
           width: 100%;
           padding: .5em 1em;
           background: rgba(0, 0, 0, .5);
           display: flex;
           justify-content: space-between;
           align-items: center;
           h2 {
             font-size: 24px;
             color: #fff;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
           }
           em {
             color: #eed60c;
             white-space: nowrap;
             font-size: 18px;
             font-style: normal;
           }
         }
   
       }
       .application {
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
         line-height: normal;
         margin-top: 1em;
         .address {
           font-size: 14px;
           color: #000;
           margin-right: 1em;
         }
         .go {
           border-radius: 5px;
           width: 120px;
           background: #0061ae;
           line-height: 35px;
           font-size: 14px;
           color: #fff;
           cursor: pointer;
           text-decoration: none;
           text-align: center;
         }
       }
     }
   } */
  }

</style>

<template>
  <div class="second-house">
    <h3 class="title">二手好房</h3>
    <p class="desc"><span>二手好房，应有尽有</span></p>
    <div class="more">
      <router-link to="secondary-source"><span @click="scrollTop">更多二手楼盘</span></router-link>
    </div>
    <!-- <Carousel :autoplay-speed="6000" autoplay v-model="value2" class="new-carousel"> -->
  <!--   <Carousel v-model="value2" class="new-carousel">
      <Carousel-item class="item-wrapper" :key="index" v-for="(subArray, index) in list">
        <div class="item" v-for="item in subArray">
          <router-link class="link" :to="{name:'SecondarySourceDetail', params:{ id:item.houseNumber }}">
            <img :src="item.coverPic" alt="">
            <div class="head">
              <h2 v-text="item.name"></h2>
              <em>{{item.unitPrice}}元/m²</em>
            </div>
          </router-link>
          <div class="application">
            <span class="address">麓山大道二段59号（雅居乐花园对面）</span>
            <a href="javascript:void(0)" v-appointment="`${item.id},${item.category}`" class="go">立即预约</a>
          </div>
        </div>
      </Carousel-item>
    </Carousel> -->
    <div class="item-wrapper">
      <div class="list-wrapper">
        <div class="item" v-for="item in list">
          <router-link class="link" :to="{name:'SecondarySourceDetail', params:{id : item.houseNumber }}">
            <img v-if="item.coverPic" :src="item.coverPic | homeCoverPic" alt="">
            <img v-else :src="no_image" alt="">
            <div class="head">
              <h2 v-text="item.name"></h2>
              <em>{{item.unitPrice}}元/m²</em>
            </div>
          </router-link>
          <div class="application">
            <img src="~@/assets/second-house-icon/address.svg" alt=""><span class="address" v-text="item.address"></span>
            <a href="javascript:void(0)" v-appointment="`${item.id},${item.category}`" class="go">立即预约</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import api from '@/service/api'

  export default {
    data () {
      return {
        value2: 0,
        list: [],
        no_image:'http://jyhimg.cdjyh.com/no_image.png?imageMogr2/auto-orient/thumbnail/!274x220r/gravity/Center/crop/274x220/blur/1x0/quality/75|watermark/2/text/5oiQ6YO95ZCJ5YWD5rGH/font/5qW35L2T/fontsize/200/fill/I0Y0RTFFMQ==/dissolve/100/gravity/NorthWest/dx/10/dy/10|imageslim'
      }
    },
    methods: {
      search () {
        api.secondarySourceTop8().then((res) => {
          this.list = res.data.top8;
        })
      },
      scrollTop () {
        document.body.scrollTop = 0
      }
    },
    mounted () {
      this.search()
    }
  }
</script>

